import React, { useState } from 'react';
import { connect } from 'umi';
import { Modal, Form } from 'antd';
import { Column } from '@ant-design/charts';
import { Tabs } from 'antd';
import { useEffect } from 'react';
const Echarts = (props) => {
  const { visible = false, onClose, dispatch } = props;
  const { show, details = {} } = visible;
  const { type = 'personal' } = details;
  useEffect(() => {
    if (show) {
      dispatch({
        type:
          type === 'personal' ? 'user/fetchMyAccountTrendData' : 'user/fetchOtherAccountTrendData',
        payload: details,
        callback: (e) => {
          setData(e);
        },
      });
    } else {
      setData([]);
      setActiveKey('newVideo');
    }
  }, [show]);
  const [data, setData] = useState([]);

  const [activeKey, setActiveKey] = useState('newVideo');
  const modalProps = {
    title: `员工画像`,
    width: 1200,
    visible: typeof visible === 'boolean' ? visible : show,
    maskClosable: true,
    destroyOnClose: true,
    zIndex: 1001,
    footer: null,
  };
  const tabList = [
    {
      label: '发布视频数量',
      key: 'newVideo',
      children: null,
    },
    {
      label: '新增播放',
      key: 'newPlay',
      children: null,
    },
    {
      label: '视频总数',
      key: 'totalVideo',
      children: null,
    },
    {
      label: '粉丝总数',
      key: 'totalFans',
      children: null,
    },
    {
      label: '首页访问数量',
      key: 'profileUv',
      children: null,
    },
    {
      label: '新增点赞',
      key: 'newLike',
      children: null,
    },
    {
      label: '新增评论',
      key: 'newComment',
      children: null,
    },
    {
      label: '新增分享',
      key: 'newShare',
      children: null,
    },
  ];
  const config = {
    data: data,
    xField: 'statisticsDate',
    yField: activeKey,
    xAxis: {
      label: {
        autoRotate: false,
      },
    },
    scrollbar: {
      type: 'horizontal',
    },
  };
  return (
    <Modal {...modalProps} onCancel={onClose}>
      <Tabs
        onChange={(e) => {
          setActiveKey(e);
        }}
        accessKey={activeKey}
        items={tabList}
      ></Tabs>
      <Column {...config} />
    </Modal>
  );
};

export default connect(({ user, loading }) => ({
  loading: loading.models.user,
}))(Echarts);
